<template>
  <div style="display: inline-block;text-align: left;">
    <el-button type="primary" size="mini" @click="openEdit(row_id)">{{$t('table.edit')}}</el-button>
    <el-dialog :visible.sync="dialogTableVisible" v-if="dialogTableVisible" :title="$t('table.edit')" width="30%">
      <el-form ref="formData" :model="formData" :rules="rules" label-position="right">
        <el-form-item :label="$t('table.holiday_name')" prop="name">
          <el-input label="right" type="text" v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item :label="$t('table.start_date')" prop="begin_time">
          <el-date-picker v-model="formData.begin_time" align="right" type="date" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('table.end_date')" prop="end_time">
          <el-date-picker v-model="formData.end_time" align="right" type="date" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('table.remark')" prop="desc">
          <el-input label="right" type="textarea" v-model="formData.desc"></el-input>
        </el-form-item>
        <el-form-item align="right">
          <div>
            <el-button type="primary" size="small" @click="submitForm()">{{$t('table.complete')}}</el-button>
            <el-button size="small" @click="closeDia()">{{$t('table.cancel')}}</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import store from "@/store";
import { getInfo, editInfo } from "@/api/attendance_management/holiday";

export default {
  props: {
    row_id: {
      type: Number,
      default: function () {
        return null;
      },
    },
  },
  data() {
    return {
      value1: "1594828800000",
      value2: "",
      dialogTableVisible: false,
      formData: {},
      rules: {
        name: [
          {
            required: true,
            message: this.$t("validation.holiday_name"),
            trigger: "blur",
          },
        ],
        begin_time: [
          {
            required: true,
            message: this.$t("validation.select_data"),
            trigger: "blur",
          },
        ],
        end_time: [
          {
            required: true,
            message: this.$t("validation.select_data"),
            trigger: "blur",
          },
        ],
        desc: [{ required: false, message: "备注", trigger: "blur" }],
      },
    };
  },
  methods: {
    openEdit(row_id) {
      (this.dialogTableVisible = true),
        // 根据id获取数据信息
        getInfo(store.getters.token, { id: row_id }).then((res) => {
          this.formData = res.data.data;
          this.listLoading = false;
        });
    },
    submitForm() {
      console.log("formData---------->", this.formData);

      this.$refs.formData.validate((valid) => {
        if (!valid) {
          return;
        } else {
          // 修改1
          editInfo(store.getters.token, this.formData).then((res) => {
            console.log(res);

            if (res.data.status) {
              this.$message.success(this.$t("table.edit_complete"));
              this.$emit("getList");
              this.dialogTableVisible = false;
            } else if (res.data.msg == "更新据失败！") {
              this.closeDia();
            } else {
              this.$message.error(this.$t("table.edit_fail"));
            }
          });
        }
      });
    },
    // 关闭弹窗
    closeDia() {
      this.dialogTableVisible = false;
    },
  },
};
</script>

<style scoped>
</style>